<template xmlns="">
    <view class="changeBind">
        <view class="dangqian_nbr">当前手机号码 <text>{{phone_number}}</text></view>
        <view class="bakcffff">
            <view class="bind_nbr">
                <text>原手机号</text>
                <input id="phone_one" placeholder="请输入原手机号" type="text" value="{{phone_one}}" bindinput="changeVal">
            </view>
            <view class="dislpayTabcll">
                <view class="bind_nbr">
                    <text>验证码</text>
                    <input id="code_one" placeholder="请输入验证码" type="text" value="{{code_one}}" bindinput="changeVal">
                </view>
                <view class="huoqu"><button @tap="sendMSGINfo(1)">获取验证码</button></view>
            </view>
            <view class="bind_nbr">
                <text>新手机号</text>
                <input id="phone_two" placeholder="请输入新手机号" type="text" value="{{phone_two}}" bindinput="changeVal">
            </view>
            <!-- <view class="dislpayTabcll">
                <view class="bind_nbr">
                    <text>图形验证码</text>
                    <input id="pic" placeholder="请输入图形验证码" type="text" value="{{pic}}" bindinput="changeVal">
                </view>
                <view class="huoqu"><image src='{{host_url}}/common/validateCode/imageCode?imageCodeKey={{new_uid}}' bindtap="refreshCode"></image></view>
            </view> -->
            <view class="dislpayTabcll">
                <view class="bind_nbr">
                    <text>验证码</text>
                    <input id="code_two" placeholder="请输入验证码" type="text" value="{{code_two}}" bindinput="changeVal">
                </view>
                <view class="huoqu"><button @tap="sendMSGINfo(2)">获取验证码</button></view>
            </view>
            <view class="button type_main" @tap="loginOut">提交</view>
        </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import utils from '@/utils/utils';
    import tip from '@/utils/tip';
    import {
        USER_INFO,USER_SPECICAL_INFO,USER_ID
    } from '@/utils/constant';

    export default class changeBind extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '更换绑定手机',    // 头部标题
        }
        components = {

        }

        data = {
            host_url:"https://gatherapi.haomengpeifang.com",
            phone_number:'',
            phone_one:'',
            code_one:'',
            key_one:'',
            phone_two:'',
            code_two:'',
            key_two:'',
            // pic:'',
            code_pic:'',
            new_uid:utils.getUUId()
        }

        // 获取短信验证码
        async sendMSGToUser (data){
            api.sendSms({
                query: data
            }).then(function(res){
                if(res.data.code == "0"){
                    tip.toast("短信发送成功",null,"none");
                }else{
                    tip.toast("短信发送失败",null,"none");
                }
            })
        }

        onLoad(option){
            this.phone_number = option.number;
        }

        // 更新手机号码
        async updatePhone (){
            let user_id = wepy.getStorageSync(USER_ID) || '';
            let _this = this;
            api.updatePhoneNum({
                query: {}
            },"userId="+user_id+"&beforePhone="+_this.phone_one+"&beforeSmsCode="+_this.code_one+"&phone="+_this.phone_two+"&smsCode="+_this.code_two+"&beforeSmsCodeKey="+_this.key_one+"&smsCodeKey="+_this.key_two).then(function(res){
                if(res.data.code == "0"){
                    wepy.navigateTo({
                      url: "/pages/personalCenter/accountSecurity?wxObj="+JSON.stringify(res.data.data)
                    })
                }else{
                    tip.error(res.data.msg)
                }
            })
        }

        methods = {  // 方法
            changeVal(e){
                let self = this;
                switch(e.target.id){
                    case 'phone_one':
                    self.phone_one = e.detail.value;
                    break;

                    case 'code_one':
                    self.code_one = e.detail.value;
                    break;

                    case 'phone_two':
                    self.phone_two = e.detail.value;
                    break;

                    case 'code_two':
                    self.code_two = e.detail.value;
                    break;

                    // case 'pic':
                    // self.pic = e.detail.value;
                    // break;

                    default:
                    break;
                }
            },
            sendMSGINfo(a){
                if(a === '1'){
                    // 检查手机格式是否正确
                    let phoneFormat = utils.vailPhone(this.phone_one);
                    if(phoneFormat){
                        let _that = this;
                        // 是手机格式,发送验证码
                        _that.key_one = utils.getUUId()
                        let _par = {
                            phone:this.phone_one,
                            key:_that.key_one,
                        }
                       this.sendMSGToUser(_par);
                    }else{
                        // 不是手机格式
                        tip.toast("请输入正确的手机号码",null,"none");
                    }
                }else if(a === '2'){
                    let phoneFormat = utils.vailPhone(this.phone_two);
                    if(phoneFormat){
                        let _that = this;
                        // 是手机格式,发送验证码
                        _that.key_two = utils.getUUId()
                        let _par = {
                            phone:this.phone_two,
                            key:_that.key_two,
                        }
                       this.sendMSGToUser(_par);
                    }else{
                        // 不是手机格式
                        tip.toast("请输入正确的手机号码",null,"none");
                    }
                }
            },
            // 刷新图形验证码
            // refreshCode(){
            //     this.new_uid=utils.getUUId();
            // },
            loginOut(){
                let self = this;
                if(!self.phone_one){
                    return tip.toast("请输入原手机号码",null,"none");
                }else if(!utils.vailPhone(this.phone_one)){
                    return tip.toast("请输入正确的原手机号码",null,"none");
                }else if(!self.phone_two){
                    return tip.toast("请输入手机号码",null,"none");
                }else if(!utils.vailPhone(this.phone_one)){
                    return tip.toast("请输入正确的手机号码",null,"none");
                }
                self.updatePhone();
            }
        }
        events = {

        }
    }

</script>
<style lang="less">
    .changeBind{
        .dangqian_nbr{
            padding: 20rpx;
        }
        .bakcffff{
            background: #fff;
            padding: 20rpx 20rpx 40rpx;

             >view{
                margin-top: 20rpx;
            }
        }
        .bind_nbr{
            border: 1px solid #ddd;
            border-radius: 2px;
            padding-top: 10rpx;
            padding-bottom: 10rpx;
            text{
                display: table-cell;
                padding-left: 20rpx;
                padding-right: 20rpx;
                vertical-align: middle;
                font-size: 26rpx;
            }
            input{
                display: table-cell;
                vertical-align: middle;
                font-size: 26rpx;
            }
        }
        .huoqu{
            button{
                font-size: 26rpx;
                padding-top: 5rpx;
                padding-bottom: 5rpx;
                color: #fff;
                border: none;
                background: orange;
            }
        }
        .dislpayTabcll{
            .bind_nbr{
                width:488rpx;
                display: table-cell;
                vertical-align: middle;
            }
            .huoqu{
                width:220rpx;
                display: table-cell;
                vertical-align: middle;
                overflow: hidden;
                button{
                    width: 200rpx;
                    float: right;
                }
                image{
                    width: 200rpx;
                    height: 70rpx;
                    float: right;
                }
            }
        }
        .pad20{
            padding: 0 20rpx;
        }
    }
</style>
